<template>
	<view>
		<view  v-if="screenWidth<480" class="flex-shrink" style="height:110rpx;"></view>
		<view  v-if="screenWidth<480" class="fixed-bottom xpy flex shadow" style="height: 110rpx;" :style="{backgroundColor: tabBar.backgroundColor}">
			<view @click="handleTabs(item.pagePath,index)" class="w-100  flex flex-column align-center justify-center" v-for="(item,index) in tabBar.Chidren.list" :key="index">
				<view style="width: 50rpx;height: 50rpx;">
					<image :src="tabId==index? Domain_ICON + item.selectedIconPath : Domain_ICON + item.iconPath" class="w-100" style="height: 100%;" mode="widthFix"></image>
				</view>
				<text class="font-sm" :style="{color:tabId==index ?tabBar.selectedColor:'#28a745'}">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				screenWidth:uni.getSystemInfoSync().windowWidth,
				tabBar: {
					selectedColor: '#dc3545',
					backgroundColor: '#ffffff',
					Chidren:{
						list: [{
							pagePath: "/pages/index/index",
							text: "商城",
							iconPath: "/index.png",
							selectedIconPath: "/index1.png"
						},
						{
							pagePath: "/pages/index/none",
							text: "合美供销",
							iconPath: "/gxdt.png",
							selectedIconPath: "/serve1.png"
						},
						{
							pagePath: "/pages/customerService/customerService",
							text: "客服",
							iconPath: "/serve.png",
							selectedIconPath: "/serve1.png"
						}, {
							pagePath: "/pages/shopCart/shopCart",
							text: "购物车",
							iconPath: "/shopcar.png",
							selectedIconPath: "/shopCar1.png"
						}, {
							pagePath: "/pages/my/my",
							text: "我的",
							iconPath: "/myself.png",
							selectedIconPath: "/myself1.png"
						}]
					}
				},
				Domain_ICON: '/static/icon', //全局变量域名
			}
		},
		props:{
			tabId: { //总计金额
				type: Number,
				default: 5
			},
		},
		methods: {
			handleTabs(url,index){//跳转
				if(this.tabId!=index){
					uni.showLoading({
						title: '正在加载...'
					})
					uni.reLaunch({
						url,
						success: (e) => {
							uni.hideLoading();
						},
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
@media screen and(min-width:480px){
	.xpy{
		width: 800rpx;
		margin: 0 auto;
	}
}
</style>